<script setup lang="ts">

import {resolve} from "node:path";

// 行业客群画像
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import TabChart from "~/contentScripts/views/sycm/industry_customer/SycmIndustryCustomerPortrait/TabChart.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {
  industryCustomerPortrait,
  industryCustomerPortraitIndexCode,
  industryCustomerPortraitType
} from "~/utils/interception/sycm/industryCustomerInterception";

const {proxy} = getCurrentInstance();
const $req = proxy.$req;
const state = reactive<any>({
  loginVisible: false,
  visible: false,
  columns: [
    {
      dataIndex: 'type',
      key: 'type',
      title: '属性类型',
      width: 100,
      tooltip: true,
      fixed: 'left',
    }, {
      dataIndex: 'index',
      key: 'index',
      title: '属性名称',
      width: 100,
      tooltip: true,
      fixed: 'left',
    },
    { // 买家数占比
      dataIndex: 'payByrCntRate',
      key: 'payByrCntRate',
      title: '买家占比',
      sorter: (a: any, b: any) => a.payByrCntRate - b.payByrCntRate,
      align: 'center',
      width: 100,
      dataType: 'customRender',
      render: (text: any, record: any, index: any) => {
        return (text * 100).toFixed(2) + '%';
      },
    },
    { // 支付转化指数
      dataIndex: 'payRateIndex',
      key: 'payRateIndex',
      title: '支付转化率',
      width: 100,
      sorter: (a: any, b: any) => a.payRateIndex - b.payRateIndex,
      tooltip: true,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any, index: any) => {
        return (text * 100).toFixed(2) + '%';
      },
    }
  ],
  dataSource: [],
  data: {
    gender: {
      payByrCntRate: [], //客群占比
      payRateIndex: [],  //支付转化指数
    },
    age: {
      payByrCntRate: [], //客群占比
      payRateIndex: [],  //支付转化指数
    },
    career: {
      payByrCntRate: [], //客群占比
      payRateIndex: [],  //支付转化指数
    },
    prov: {
      payByrCntRate: [], //客群占比
      payRateIndex: [],  //支付转化指数
    },
    city: {
      payByrCntRate: [], //客群占比
      payRateIndex: [],  //支付转化指数
    },
  },
  loading: false,
  prams: {},
});
const handle = () => {
  state.visible = true;
  loadAll();

}
const mapIndexes = {
  gender: {
    name: '性别',
    '1': '男',
    '0': '女',
    '-1': '未知',
  },
  age: {
    name: '年龄',
    '1': '18岁以下',
    '2': '18-24岁',
    '3': '25-29岁',
    '4': '30-34岁',
    '5': '35-39岁',
    '6': '40-49岁',
    '7': '50岁以上',
    '-1': '未知',
  },
  career: {
    name: '职业',
    '1': '学生',
    '2': '公务员',
    '3': '军人',
    '4': '教师',
    '5': '白领',
    '6': '自由职业',
    '7': '个体户',
    '8': '企业主',
    '9': '工人',
    '10': '农民',
    '11': '其他',
    '-1': '未知',
  },
  prov: {
    name: '省份',
  },
  city: {
    name: '城市',
  }
};
const loadAll = async () => {

  state.loading = true;
  await Promise.all([
    loadData(industryCustomerPortraitType.gender, industryCustomerPortraitIndexCode.payByrCntRate),
    loadData(industryCustomerPortraitType.age, industryCustomerPortraitIndexCode.payByrCntRate),
    loadData(industryCustomerPortraitType.career, industryCustomerPortraitIndexCode.payByrCntRate),
    loadData(industryCustomerPortraitType.prov, industryCustomerPortraitIndexCode.payByrCntRate),
    loadData(industryCustomerPortraitType.city, industryCustomerPortraitIndexCode.payByrCntRate),
    loadData(industryCustomerPortraitType.gender, industryCustomerPortraitIndexCode.payRateIndex),
    loadData(industryCustomerPortraitType.age, industryCustomerPortraitIndexCode.payRateIndex),
    loadData(industryCustomerPortraitType.career, industryCustomerPortraitIndexCode.payRateIndex),
    loadData(industryCustomerPortraitType.prov, industryCustomerPortraitIndexCode.payRateIndex),
    loadData(industryCustomerPortraitType.city, industryCustomerPortraitIndexCode.payRateIndex),

  ])
  // loadData(industryCustomerPortraitType.gender, industryCustomerPortraitIndexCode.payByrCntRate);
  // loadData(industryCustomerPortraitType.age, industryCustomerPortraitIndexCode.payByrCntRate);
  // loadData(industryCustomerPortraitType.career, industryCustomerPortraitIndexCode.payByrCntRate);
  // loadData(industryCustomerPortraitType.prov, industryCustomerPortraitIndexCode.payByrCntRate);
  // loadData(industryCustomerPortraitType.city, industryCustomerPortraitIndexCode.payByrCntRate);
  //
  // loadData(industryCustomerPortraitType.gender, industryCustomerPortraitIndexCode.payRateIndex);
  // loadData(industryCustomerPortraitType.age, industryCustomerPortraitIndexCode.payRateIndex);
  // loadData(industryCustomerPortraitType.career, industryCustomerPortraitIndexCode.payRateIndex);
  // loadData(industryCustomerPortraitType.prov, industryCustomerPortraitIndexCode.payRateIndex);
  // loadData(industryCustomerPortraitType.city, industryCustomerPortraitIndexCode.payRateIndex);

}
const loadData = (type: industryCustomerPortraitType, code: industryCustomerPortraitIndexCode):Promise<boolean> => {
  return new Promise((resolve)=>{
    let data = $req.getResponse(industryCustomerPortrait(type, code));
    if (!data) {
      if (code == industryCustomerPortraitIndexCode.payRateIndex) {
        document.querySelector("#completeShopPortrait input[value='payRateIndex']")?.click();
      } else {
        document.querySelector("#completeShopPortrait input[value='payByrCntRate']")?.click();
      }
      setTimeout(async () => {
        resolve(loadData(type, code))
      }, 300);
    }else {
      // 获取到枚举type字符串
      let typeStr = industryCustomerPortraitType[type];
      let codeStr = industryCustomerPortraitIndexCode[code];
      state.data[typeStr][codeStr] = data.data;
      console.log(typeStr,codeStr,data.data);
      resolve(true);
    }
  });
}
// 计算表格数据
const calcDataSource = () => {
  // 计算表格数据 根据data中columns字段整理出 dataSource dataSource是一维数组
  let dataSource: any[] = [];
  for (let key in state.data) {
    // key是gender age career prov city
    // data 数据格式 { "gender": { "payByrCntRate": [ { "name": "1", "value": 0.313355 }, { "name": "0", "value": 0.634507 }, { "name": "-1", "value": 0.052123 } ], "payRateIndex": [ { "name": "1", "value": 0.3525 }, { "name": "0", "value": 0.3829 }, { "name": "-1", "value": 0.2505 } ] }, "age": { "payByrCntRate": [ { "name": "2", "value": 0.131488 }, { "name": "3", "value": 0.110987 }, { "name": "4", "value": 0.234595 }, { "name": "5", "value": 0.214638 }, { "name": "6", "value": 0.183676 }, { "name": "7", "value": 0.072811 } ], "payRateIndex": [ { "name": "2", "value": 0.2801 }, { "name": "3", "value": 0.3298 }, { "name": "4", "value": 0.4253 }, { "name": "5", "value": 0.4374 }, { "name": "6", "value": 0.3703 }, { "name": "7", "value": 0.2376 } ] }, "career": { "payByrCntRate": [ { "name": "个体经营/服务人员", "value": 0.300524 }, { "name": "农林牧渔从业人员", "value": 0.115995 }, { "name": "工人", "value": 0.112358 }, { "name": "公司职员", "value": 0.091512 }, { "name": "学生", "value": 0.047481 }, { "name": "教职工", "value": 0.043791 }, { "name": "医务人员", "value": 0.028089 }, { "name": "金融公司职员", "value": 0.019101 }, { "name": "科研人员", "value": 0.01707 }, { "name": "汽车相关服务人员", "value": 0.010374 }, { "name": "IT公司职员", "value": 0.008656 }, { "name": "传媒公司职员", "value": 0.006061 }, { "name": "法律公司职员", "value": 0.001331 }, { "name": "会计公司职员", "value": 0.000303 }, { "name": "税务公司职员", "value": 0.000065 } ], "payRateIndex": [ { "name": "汽车相关服务人员", "value": 0.4088 }, { "name": "个体经营/服务人员", "value": 0.3821 }, { "name": "工人", "value": 0.3807 }, { "name": "公司职员", "value": 0.3782 }, { "name": "IT公司职员", "value": 0.3779 }, { "name": "农林牧渔从业人员", "value": 0.3773 }, { "name": "税务公司职员", "value": 0.3758 }, { "name": "传媒公司职员", "value": 0.3747 }, { "name": "法律公司职员", "value": 0.3732 }, { "name": "医务人员", "value": 0.3712 }, { "name": "金融公司职员", "value": 0.3521 }, { "name": "会计公司职员", "value": 0.3503 }, { "name": "科研人员", "value": 0.2855 }, { "name": "教职工", "value": 0.2855 }, { "name": "学生", "value": 0.2575 } ] }, "prov": { "payByrCntRate": [ { "name": "广东省", "value": 0.127416 }, { "name": "江苏省", "value": 0.100712 }, { "name": "浙江省", "value": 0.0848 }, { "name": "山东省", "value": 0.069459 }, { "name": "河南省", "value": 0.050716 }, { "name": "安徽省", "value": 0.042622 }, { "name": "福建省", "value": 0.042152 }, { "name": "湖北省", "value": 0.041767 }, { "name": "河北省", "value": 0.041178 }, { "name": "四川省", "value": 0.040837 }, { "name": "上海", "value": 0.039265 }, { "name": "湖南省", "value": 0.036543 }, { "name": "江西省", "value": 0.030724 }, { "name": "北京", "value": 0.030502 }, { "name": "辽宁省", "value": 0.026122 }, { "name": "陕西省", "value": 0.023437 }, { "name": "广西壮族自治区", "value": 0.021709 }, { "name": "重庆", "value": 0.021032 }, { "name": "山西省", "value": 0.020044 }, { "name": "云南省", "value": 0.016594 }, { "name": "黑龙江省", "value": 0.014558 }, { "name": "天津", "value": 0.013817 }, { "name": "吉林省", "value": 0.012324 }, { "name": "贵州省", "value": 0.011805 }, { "name": "内蒙古自治区", "value": 0.008962 }, { "name": "香港特别行政区", "value": 0.007684 }, { "name": "甘肃省", "value": 0.007169 }, { "name": "海南省", "value": 0.005464 }, { "name": "新疆维吾尔自治区", "value": 0.003125 }, { "name": "宁夏回族自治区", "value": 0.002401 } ], "payRateIndex": [ { "name": "江西省", "value": 0.4174 }, { "name": "浙江省", "value": 0.4173 }, { "name": "湖南省", "value": 0.4169 }, { "name": "江苏省", "value": 0.4168 }, { "name": "福建省", "value": 0.4123 }, { "name": "安徽省", "value": 0.4064 }, { "name": "重庆", "value": 0.3928 }, { "name": "湖北省", "value": 0.3882 }, { "name": "广东省", "value": 0.3831 }, { "name": "四川省", "value": 0.3766 }, { "name": "上海", "value": 0.371 }, { "name": "山东省", "value": 0.3698 }, { "name": "河北省", "value": 0.364 }, { "name": "河南省", "value": 0.3613 }, { "name": "贵州省", "value": 0.3583 }, { "name": "陕西省", "value": 0.3399 }, { "name": "海南省", "value": 0.3397 }, { "name": "吉林省", "value": 0.337 }, { "name": "山西省", "value": 0.3288 }, { "name": "云南省", "value": 0.3274 }, { "name": "广西壮族自治区", "value": 0.3267 }, { "name": "天津", "value": 0.3161 }, { "name": "辽宁省", "value": 0.3093 }, { "name": "黑龙江省", "value": 0.2869 }, { "name": "北京", "value": 0.2794 }, { "name": "宁夏回族自治区", "value": 0.2649 }, { "name": "甘肃省", "value": 0.2591 }, { "name": "内蒙古自治区", "value": 0.2454 }, { "name": "青海省", "value": 0.2314 }, { "name": "澳门特别行政区", "value": 0.1849 } ] }, "city": { "payByrCntRate": [ { "name": "上海市", "value": 0.039265 }, { "name": "广州市", "value": 0.031041 }, { "name": "杭州市", "value": 0.030712 }, { "name": "北京市", "value": 0.030502 }, { "name": "南京市", "value": 0.028651 }, { "name": "深圳市", "value": 0.024119 }, { "name": "成都市", "value": 0.02331 }, { "name": "重庆市", "value": 0.021032 }, { "name": "武汉市", "value": 0.020589 }, { "name": "苏州市", "value": 0.019372 }, { "name": "济南市", "value": 0.016652 }, { "name": "郑州市", "value": 0.015185 }, { "name": "东莞市", "value": 0.01458 }, { "name": "长沙市", "value": 0.01428 }, { "name": "合肥市", "value": 0.014153 }, { "name": "天津市", "value": 0.013817 }, { "name": "西安市", "value": 0.012999 }, { "name": "宁波市", "value": 0.012433 }, { "name": "福州市", "value": 0.012194 }, { "name": "石家庄市", "value": 0.011619 }, { "name": "南昌市", "value": 0.010443 }, { "name": "青岛市", "value": 0.010353 }, { "name": "佛山市", "value": 0.010097 }, { "name": "温州市", "value": 0.009735 }, { "name": "无锡市", "value": 0.009413 }, { "name": "沈阳市", "value": 0.008941 }, { "name": "厦门市", "value": 0.008926 }, { "name": "南宁市", "value": 0.008347 }, { "name": "昆明市", "value": 0.008255 }, { "name": "泉州市", "value": 0.008055 } ], "payRateIndex": [ { "name": "铜仁市", "value": 0.7077 }, { "name": "新余市", "value": 0.4431 }, { "name": "随州市", "value": 0.4401 }, { "name": "广安市", "value": 0.4401 }, { "name": "湖州市", "value": 0.439 }, { "name": "宁波市", "value": 0.4388 }, { "name": "益阳市", "value": 0.4383 }, { "name": "苏州市", "value": 0.438 }, { "name": "绍兴市", "value": 0.4379 }, { "name": "南通市", "value": 0.4378 }, { "name": "邵阳市", "value": 0.4376 }, { "name": "莆田市", "value": 0.4371 }, { "name": "咸宁市", "value": 0.4354 }, { "name": "嘉兴市", "value": 0.4354 }, { "name": "黄石市", "value": 0.4281 }, { "name": "宜春市", "value": 0.4273 }, { "name": "上饶市", "value": 0.4261 }, { "name": "孝感市", "value": 0.4257 }, { "name": "永州市", "value": 0.4256 }, { "name": "六安市", "value": 0.4251 }, { "name": "泰州市", "value": 0.4251 }, { "name": "岳阳市", "value": 0.425 }, { "name": "九江市", "value": 0.4248 }, { "name": "常州市", "value": 0.4234 }, { "name": "抚州市", "value": 0.4207 }, { "name": "巴中市", "value": 0.4198 }, { "name": "郴州市", "value": 0.4177 }, { "name": "台州市", "value": 0.4177 }, { "name": "吉安市", "value": 0.4176 }, { "name": "资阳市", "value": 0.4176 } ] } }
    // payByrCntRate 和 payRateIndex 是放到table中同一行
    // 1. 先获取到payByrCntRate的数据
    let payByrCntRate = state.data[key].payByrCntRate;
    // 2. 获取到payRateIndex的数据
    let payRateIndex = state.data[key].payRateIndex;
    // 3. 获取到payByrCntRate的数据的所有name
    let payByrCntRateNames = payByrCntRate.map((item: any) => {
      return item.name;
    });
    // 4. 获取到payRateIndex的数据的所有name
    let payRateIndexNames = payRateIndex.map((item: any) => {
      return item.name;
    });
    // 5. 获取到payByrCntRate的数据的所有value
    let payByrCntRateValues = payByrCntRate.map((item: any) => {
      return item.value;
    });
    // 6. 获取到payRateIndex的数据的所有value
    let payRateIndexValues = payRateIndex.map((item: any) => {
      return item.value;
    });
    // 7. 遍历数据 存入dataSource
    payByrCntRateNames.forEach((item: any, index: number) => {
      let obj: any = {};
      obj.type = mapIndexes[key].name;
      obj.index = mapIndexes[key][item]||item;
      obj.payByrCntRate = payByrCntRateValues[index];
      obj.payRateIndex = payRateIndexValues[index];
      dataSource.push(obj);
    })

  }
  state.loading = false;
  state.dataSource = dataSource;
};
watch(() => state.data, (val) => {
  if (val) {
    // 监听所有数据都已经加载完毕
    let flag = true;
    for (let key in val) {
      for (let key2 in val[key]) {
        if (val[key][key2].length == 0) {
          flag = false;
        }
      }
    }
    if (flag) {
      calcDataSource();
    }
  }
}, {deep: true})
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0"/>
      <a-button size="small" type="primary" @click="handle">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="state.loginVisible"/>
    <custom-modal v-model:visible="state.visible" title="市场-行业客群-属性画像" width="75%" style="top: 20px;">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
      </template>
      <div style="max-height: calc(100vh - 150px);overflow-y: auto;">
        <TabChart :data="state.data" :map-indexes="mapIndexes"/>
        <a-divider/>
        <base-table :loading="state.loading" :data-source="state.dataSource" :columns="state.columns" size="small" :scroll="{
          y:700
        }" table-name="市场-行业客群-属性画像"
        >
        </base-table>
      </div>
    </custom-modal>
  </base-app>
</template>

<style lang="less" scoped>

</style>
